<template>
    <div class="resCommon">
        <div class="search">
            <div class="classify">
                <refresh title="同步HIVE" @refresh="syncResource" :loading="syncH"/>
                <el-radio-group v-model="activeName" @change="handleClick">
                    <el-radio-button label="public">公共</el-radio-button>
                    <el-radio-button label="tenant">租户</el-radio-button>
                </el-radio-group>
                <!-- <el-button class="syncBtn" type="primary" @click="syncResource" title="同步HIVE" icon="el-icon-refresh" :loading="syncH"></el-button> -->
            </div>
            <div class="searchBox">
                <el-button class="addResBtn" :disabled="!(activeName=='public'&&clickStep=='1')" type="primary" @click="addResBtn">新建资源</el-button>
                <search placeholder="请输入搜索内容" :live-search="true" :search-word.sync="searchName" @search="searchCon"/>
            </div>
        </div>
        <!-- 目录面包屑 -->
        <el-breadcrumb v-if="breadcrumbList.length>1" class="breadcrumb-wrap" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item 
                v-for="(item, index) in breadcrumbList"
                :key="item.id"
                @click.native="onClickBread(item, index)">
                <span class="cursor">{{item.name}}</span>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <div v-else class="breadVisbility"></div>
        <el-table v-loading="loading" :data="resourcePublic" stripe style="width: 100%">
            <el-table-column :label="HIVEtableHead[clickStep-1].first">
                <template slot-scope="scope">
                    <el-button v-if="clickStep==1" @click="menuDetail(scope.row)" type="text">{{scope.row.databaseName}}</el-button>
                    <el-button v-if="clickStep==2" @click="menuDetail(scope.row)" type="text">{{scope.row.tableName}}</el-button>
                    <span v-if="clickStep==3">{{scope.row.columnName}}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="clickStep==2" prop="name" label="列数">
                <template slot-scope="scope">
                    <span> {{scope.row.columnNum}} </span>
                </template>
            </el-table-column>
            <el-table-column v-if="clickStep==1&&activeName=='public'" prop="name" label="分配的租户">
                <template slot-scope="scope">
                    <span v-for="(item,ind) in scope.row.tenantList" :key='ind'>
                        {{item}}
                        <span v-if="ind!=scope.row.tenantList.length-1">,</span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column v-if="clickStep==1&&activeName=='tenant'" prop="name" label="所属租户">
                <template slot-scope="scope">
                    <span v-for="(item,ind) in scope.row.tenantList" :key='ind'>
                        {{item}}
                        <span v-if="ind!=scope.row.tenantList.length-1">,</span>
                    </span>
                </template>
            </el-table-column>
            <!-- <el-table-column v-if="clickStep!=1" label="创建者">
                <template slot-scope="scope">
                    <span> {{scope.row.creator}} </span>
                </template>
            </el-table-column> -->
            <el-table-column v-if="clickStep!=1" prop="name" label="修改日期">
                <template slot-scope="scope">
                    <span> {{scope.row.updDate}} </span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-tooltip content="分配租户" placement="top">
                        <el-button v-if="clickStep==1&&activeName=='public'" type="text" @click="tenantBtn(scope.row)">
                            <i class="el-icon-files icon-fs"></i>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip content="详情" placement="top">
                        <el-button @click="resDetail(scope.row)" v-if="clickStep!=1" type="text">
                            <i class="el-icon-view icon-fs"></i>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip v-if="clickStep!=3" content="删除" placement="top">
                        <el-button type="text" @click="deleteBtn(scope.row)">
                            <i class="el-icon-delete icon-fs"></i>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页(默认 10条/页) -->
        <pagenation :pageInfo='pageinfo'></pagenation>
        <dialogCom :diaData='dialogData'></dialogCom>
    </div>
</template>

<script>
import DialogCom from '@/components/resource/Resource';
import Pagenation from '@/components/resource/Pagenation'
import resource from '@/mixins/resource'
import Search from '@/components/common/Search'
    export default {
        components:{ DialogCom, Pagenation, Search },
        mixins:[resource],
        data() {
            return {
                pageinfo: {
                    tenantNum: 0,
                    currentPage: 1
                },
                dialogData:{
                    type: 'HIVE',
                    label:'库名',
                    addResourceTab: false,
                    titleTips: '',
                    opeBtn: '',
                    isDisabled: false,
                    operatorTips: '',
                    resOperate: false,
                },
                newResRules: {
                    name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ]
                },
                currentPage: 1,
            }
        },
        mounted(){
            this.breadcrumbList = [
                {
                    name: '返回',
                    id: '0'
                }
            ],
            // 获取列表
            this.getResourceList();
        },
        methods:{
            addResBtn(){
                this.dialogData.titleTips = '新建公共资源';
                this.dialogData.addResourceTab = true;
                this.dialogData.isDisabled = false;
                this.dialogData.resDetail = false;
                this.dialogData.editData = {};
                this.dialogData.isPublic = '1';  //1为公共资源
            },
            tenantBtn(row){
                if(this.clickStep == 1){
                    this.dialogData.label='库名'
                    row.spaceName = row.databaseName
                } else if(this.clickStep == 2){
                    this.dialogData.label='表名'
                    row.spaceName = row.tableName
                } else if(this.clickStep == 3){
                    this.dialogData.label='列名'
                    row.spaceName = row.columnName
                }
                this.dialogData.editData = row;
                this.dialogData.editData.url = row.spaceName;
                this.dialogData.operatorTips = '分配租户';
                this.dialogData.resOperate = true;
                this.dialogData.opeBtn = '1';
                this.dialogData.resType;
                localStorage.selectLength = row.tenantList.length;
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '~@/styles/resCommon.scss';
</style>